<template>
    <div>
        <div ref="refChart" style="width: 100%;height:17.5rem;"></div>
    </div>
</template>

<script setup lang="ts">
import { RequestShopGetStatistics } from "@/api/path/index.js";
// 基于准备好的dom，初始化echarts实例
// 绘制图表
// const shopid=ref<any>()
//
// onMounted(() => {
//     if(localStorage.getItem('ShopId')=='null'){
//         shopid.value='-1'
//     }else{
//         shopid.value=localStorage.getItem('ShopId')
//     }
//     const xAxis = ref<any>([])
//     const seriesData = ref<any>([])
//     RequestShopGetStatistics(shopid.value).then((res: any) => {
//         for (let i = 0; i < res.resultObj.monthlySales.length; i++) {
//             xAxis.value[i] = res.resultObj.monthlySales[i].key
//             seriesData.value[i] = res.resultObj.monthlySales[i].data
//         }
//         var chartDom = document.getElementById('main3');
//         var myChart = echarts.init(chartDom);
//         var option;
//         option = {
//             grid: {
//                 top: '16%',
//                 left: '5%',
//                 right: '5%',
//                 bottom: '10%',
//                 containLabel: true,
//             },
//             tooltip: {
//                 axisPointer: {
//                     type: 'cross',
//                     label: {
//                         backgroundColor: '#000'
//                     }
//                 }
//             },
//             xAxis: [
//                 {
//                     type: 'category',
//                     boundaryGap: false,
//                     data: xAxis.value
//                 }
//             ],
//             yAxis: [
//                 {
//                     type: 'value'
//                 }
//             ],
//             series: [
//                 {
//                     name: '销售额',
//                     type: 'line',
//                     // stack: 'Total',
//                     smooth: true,
//                     lineStyle: {
//                         width: 2
//                     },
//                     showSymbol: false,
//                     areaStyle: {
//                         opacity: 0.8,
//                         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
//                             {
//                                 offset: 0,
//                                 color: 'rgba(231,100,255,0.2)'
//                             },
//                             {
//                                 offset: 1,
//                                 color: 'rgba(0, 93, 165,.1)'
//                             }
//                         ])
//                     },
//                     emphasis: {
//                         focus: 'series'
//                     },
//                     data: seriesData.value
//                 }
//             ]
//         };
//
//         option && myChart.setOption(option);
//     })
// })

import {onUnmounted, onMounted, ref, markRaw} from 'vue';
import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;
const refChart = ref();
const chartInstance = ref();
const chartData = ref();
const xAxis = ref()
const shopid=ref()

// 获取接口数据
const getData = () => {
  if(localStorage.getItem('ShopId')=='null'){
    shopid.value='-1'
  }else{
    shopid.value=localStorage.getItem('ShopId')
  }
  return new Promise((resolve, reject) => {
    RequestShopGetStatistics(shopid.value)
      .then((res: any) => {
        xAxis.value=res.resultObj.monthlySales.map((item:any)=>{
          return item.key
        })
        chartData.value = res.resultObj.monthlySales.map((item:any)=>{
          return item.data
        })
        resolve(res.resultObj);
      })
      .catch((err: any) => {
        reject(err);
      });
  });
};
onMounted(async () => {
  await getData();
  // 图表初始化
  initChart();
  // 调用Echarts图表自适应方法
  screenAdapter();
  // Echarts图表自适应
  window.addEventListener('resize', screenAdapter);
});

const initChart = () => {
  chartInstance.value =markRaw(echarts.init(refChart.value))
  const initOption: EChartsOption ={
    grid: {
      top: '16%',
      left: '5%',
      right: '5%',
      bottom: '10%',
      containLabel: true,
    },
    tooltip: {
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#000'
        }
      }
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: xAxis.value
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '销售额',
        type: 'line',
        // stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 2
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(231,100,255,0.2)'
            },
            {
              offset: 1,
              color: 'rgba(0, 93, 165,.1)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: chartData.value
      }
    ]
  };
  // 图表初始化配置
  chartInstance.value?.setOption(initOption);
};
const screenAdapter = () => {
  // 手动的调用图表对象的resize 才能产生效果
  chartInstance.value.resize({width:'auto', animation: { duration: 300 } });
};
onUnmounted(() => {
  // 销毁Echarts图表
  chartInstance.value.dispose();
  chartInstance.value = null;
  // Echarts图表自适应销毁
  window.removeEventListener('resize', screenAdapter);
});
</script>

<style lang="scss" scoped>

</style>